import React, { Component } from 'react';
import {Button, Card, Icon, Radio} from 'antd';
import './ui.less'
const ButtonGroup = Button.Group;
class Buttons extends Component {
    state = {
        loading: true,
        size: 'large'
    }
    handleCloseLoading = () => {
        this.setState({
            loading: false
        })
    }
    handleRadioChange = (e) => {
        this.setState({
            size: e.target.value
        })
    }
    render() {
        const size = this.state.size;
        return (
            <div>
                <Card title="基础按钮">
                    <Button type="default">Manage</Button>
                    <Button type="primary">Manage</Button>
                    <Button type="dashed">Manage</Button>
                    <Button type="danger">Manage</Button>
                    <Button disabled>Manage</Button>
                </Card>
                <Card title="图形按钮">
                    <Button icon="plus">创建</Button>
                    <Button icon="edit">编辑</Button>
                    <Button icon="delete">删除</Button>
                    <Button icon="search" shape="circle"></Button>
                    <Button icon="search" type="primary">搜索</Button>
                    <Button icon="download">下载</Button>
                </Card>
                <Card title="loading按钮">
                    <Button type="default" loading={this.state.loading}>确定</Button>
                    <Button type="primary" loading={this.state.loading}>点击加载</Button>
                    <Button shape="circle" loading={this.state.loading}></Button>
                    <Button type="primary" onClick={this.handleCloseLoading}>关闭</Button>
                </Card>
                <Card title="按钮组">
                    <ButtonGroup>
                        <Button type="primary" style={{marginRight: 0}}>
                            <Icon type="left" />Go back
                        </Button>
                        <Button type="primary">
                            Go forward<Icon type="right" />
                        </Button>
                    </ButtonGroup>
                </Card>
                <Card title="按钮尺寸">
                    <Radio.Group value={size} onChange={this.handleRadioChange}>
                        <Radio value="small">小</Radio>
                        <Radio value="default">中</Radio>
                        <Radio value="large">大</Radio>
                    </Radio.Group>

                    <Button size={size} shape="circle"></Button>
                    <Button size={size} shape="circle"></Button>
                    <Button size={size} type="dashed">Manage</Button>
                    <Button size={size} type="danger">Manage</Button>
                </Card>
            </div>
        );
    }
}

export default Buttons;